<script setup lang="ts">
import { ref } from 'vue'
import { changeUserInfoApi, getUserInfoApi } from '@/services/my'
import { useMemberStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const picture = ref<string>('')
const baseURL = 'https://szsensing.com:8581/'
const name = ref<string>('')
const updateAvatar = (e: any) => {
  console.log(e.detail.avatarUrl)
  picture.value = e.detail.avatarUrl
  //第一次自动请求是浏览器获取的腾讯服务器上的图片地址
  uni.uploadFile({
    url: `/slp/user/setPicture/${memberStore.profile?.id}`,
    filePath: e.detail.avatarUrl,
    name: 'file',
    success: (res) => {
      console.log(res)
      picture.value = baseURL + JSON.parse(res.data).data
      console.log(picture.value)
    },
  })
}

const submit = async () => {
  const res = await changeUserInfoApi({
    userId: memberStore.profile!.id,
    picture: picture.value,
    nickname: name.value,
  })
  if (res.msg === '对象正常') {
    uni.showToast({
      title: '修改成功',
      icon: 'none',
    })
    const { data } = await getUserInfoApi(memberStore.profile!.id)
    memberStore.changeUserInfo(data.nickname, data.picture)

    uni.navigateBack()
  }
}
onLoad(() => {
  picture.value = memberStore.profile?.picture!
  name.value = memberStore.profile?.nickname!
})
const form = ref<any>()
//通过input框的input事件获取不到昵称的value值，只能通过form的submit事件获取
const handlenickname = (e: any) => {
  name.value = e.detail.value.nickname
  //因为input框没有绑定model里的值，所以需要手动赋值
  model.value.nickname = e.detail.value.nickname
  form.value
    .validate()
    .then(() => {
      submit()
    })
    .catch((err: any) => {
      console.log(err)
    })
}
//要想触发验证，必须要有rules和model
const rules = ref({
  nickname: [
    {
      required: true,
      message: '请输入长度为10个字符以内的昵称',
      trigger: ['blur', 'change'],
      max: 10,
    },
  ],
})
const model = ref({
  nickname: '',
})
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<template>
  <view class="content">
    <view class="title">
      <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon> {{ '修改资料' }}
    </view>
    <form @submit="handlenickname">
      <u-form ref="form" :rules="rules" :model="model">
        <view class="info-box">
          <u-cell-group :border="false"  >
            <u-cell title="头像" >
              <template #value>
                <button
                  plain
                  open-type="chooseAvatar"
                  @chooseavatar="updateAvatar"
                  style="border-color: white; padding: 0 9.615rpx"
                >
                  <u-avatar :src="picture"></u-avatar>
                </button>
              </template>
            </u-cell>
            <u-cell title="昵称">
              <template #value>
                <u-form-item prop="nickname">
                  <input type="nickname" class="name" v-model="name" name="nickname" />
                </u-form-item>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </u-form>
      <!-- 微信小程序不允许模拟原生button点击，必须用户主动触发，所以想通过隐藏butoon用u-button来触发click是不行的 -->
      <button form-type="submit" class="submitButton" hover-class="button-hover">确定</button>
    </form>
  </view>
</template>
<style lang="scss">
.content {
  position: relative;
  height: 100%;
  padding-top: 115.385rpx;
  background: url(@/static/starry2.png) no-repeat ;
  background-size: contain;
  .title {
    margin-bottom: 19.231rpx;
    font-size: 34.615rpx;
    text-align: center;
    color: #ffff;
    position: relative;
    .u-icon {
      position: absolute;
      left: 3%;
    }
  }
  .info-box {
    .name {
      text-align: right;
      margin-right: 19.231rpx;
    }
    .sex {
      width: 96.154rpx;
    }
    .age {
      display: flex;
      line-height: 46.154rpx;
    }
    .weight {
      display: flex;
      line-height: 46.154rpx;
    }
  }
  .submitButton {
    margin: 38.462rpx auto;
    width: 634.615rpx;
    border-radius: 192.308rpx;
    border: 1px solid #3780a6;
    background-color: #3780a6;
    color: #ffff;
    font-size: 26.923rpx;
  }
  .button-hover {
    background-color: #2f6d8d;
    color: #d9d9d9;
  }
}
</style>
